<template>
  <el-select v-model="currentValue" :size="size" clearable class="w-fill" :placeholder="placeholder" @change="onChange">
    <el-option :value="data[valueName]" :label="data[labelName]" v-for="(data, i) in datas" :key="i">
      {{ data[labelName] }}
    </el-option>
  </el-select>
</template>
<script setup name="FlowSimpleSelect">

import {reactive, ref, createApp,  computed, onMounted, toRefs, watch} from "vue";
import {useStore} from 'vuex';
import {getStartNode} from "@/utils/nodeUtil.js";
/* 组件局部注册 */
const app = createApp({});
const store = useStore();

const emit = defineEmits(['input','update:name','change'])

const props = defineProps({
  datas: {
    type: Array,
    required: false,
    default: () => [],
  },
  valueName: {
    type: String,
    required: false,
    default: 'value',
  },
  labelName: {
    type: String,
    required: false,
    default: 'name',
  },
  size: {
    type: String,
    required: false,
    default: 'default',
  },
  placeholder: {
    type: String,
    required: false,
    default: '请选择',
  },
  value: {
    type: Number,
    required: false,
    default: null,
  },
});

const {datas,valueName,labelName,size,placeholder,value} = toRefs(props)

const currentValue = ref(null);


const  initData = (value)=> {
  if (value) {
    currentValue.value = value;
  } else {
    currentValue.value = null;
  }
}
const onChange = (value) => {
  emit('input', value);
  emit(
      'update:name',
      datas.value.filter((data) => data[valueName.value] == value).map((data) => data[labelName.value]),
  );
  emit('change', value);
}


watch(value,(newValue,oldValue)=>{
  console.log("value------改变了")
  initData(newValue)
},{immediate:true})

onMounted(() => {
  initData(value);
  console.log("select>", JSON.stringify(datas))
})


// export default {
//   name: 'FlowSimpleSelect',
//   props: {
//     datas: {
//       type: Array,
//       required: false,
//       default: () => [],
//     },
//     valueName: {
//       type: String,
//       required: false,
//       default: 'value',
//     },
//     labelName: {
//       type: String,
//       required: false,
//       default: 'name',
//     },
//     size: {
//       type: String,
//       required: false,
//       default: 'default',
//     },
//     placeholder: {
//       type: String,
//       required: false,
//       default: '请选择',
//     },
//     value: {
//       type: Number,
//       required: false,
//       default: null,
//     },
//   },
//   data() {
//     return {
//       currentValue: null,
//     };
//   },
//   watch: {
//     value(curVal, oldVal) {
//       this.initData(curVal);
//     },
//   },
//   mounted() {
//     this.initData(this.value);
//     console.log("select>", JSON.stringify(this.datas))
//   },
//   methods: {
//     initData(value) {
//       if (value) {
//         this.currentValue = value;
//       } else {
//         this.currentValue = null;
//       }
//     },
//     onChange(value) {
//       this.$emit('input', value);
//       this.$emit(
//           'update:name',
//           this.datas.filter((data) => data[this.valueName] == value).map((data) => data[this.labelName]),
//       );
//       this.$emit('change', value);
//     },
//   },
// };
</script>
